<template>
  <el-container>
    <el-header class="treenopadding">
      <el-input
        v-model="query"
        size="small"
        placeholder="请输入节点名称"
        @input="onQueryChanged"
      />
      &nbsp;&nbsp;
      <el-dropdown>
        <el-icon><More /></el-icon>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="expandHandle">节点还原</el-dropdown-item>
            <!-- <el-dropdown-item @click="expandHandle">全部收起</el-dropdown-item> -->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>

    <el-main class="nopadding">
      <el-tree-v2
        class="tree-box"
        v-bind="$attrs"
        default-expand-all
        :filter-method="filterMethod"
        ref="componentRef"
        :key="componentKey"
      >
        <template v-slot:default="{ node }">
          <el-tree-line
            :node="node"
            :treeData="treeLineData"
            :showLabelLine="true"
            :indent="10"
          >
            <template v-slot:node-label>
              <span class="text-sm">
                <!-- {{ node.data }} -->
                {{ node.data[nodelaelName] }}
              </span>
            </template>
          </el-tree-line>
        </template>
      </el-tree-v2>
    </el-main>
  </el-container>
</template>
<script setup>
import ElTreeLine from "@/components/ReTreeLine";
import { ref, computed, useAttrs, onMounted, onBeforeUnmount } from "vue";
const treeLineData = computed(() => {
  return useAttrs().data;
});
const nodelaelName = computed(() => {
  return useAttrs().props.label;
});
const query = ref("");
const componentRef = ref();
const componentKey = ref(0);
const expandAll = ref(false);
const componentHeight = ref(0);
const updateComponentHeight = () => {
  componentHeight.value = componentRef.value.offsetHeight;
  console.log("componentHeight", componentHeight);
};
const expandHandle = () => {
  componentKey.value++;
  // console.log(componentRef.store._getAllNodes());
  // componentRef.expandAll();
  // expandAll.value = !expandAll.value;
  // expandNodes(componentRef.store.root);
};
const expandNodes = (node) => {
  node.expanded = expandAll.value;
  for (let i = 0; i < node.childNodes.length; i++) {
    node.childNodes[i].expanded = expandAll.value;
    if (node.childNodes[i].childNodes.length > 0) {
      expandNodes(node.childNodes[i]);
    }
  }
};

const onQueryChanged = (query) => {
  componentRef.value.filter(query);
};
const filterMethod = (query, node) => {
  return node[nodelaelName.value].includes(query);
};
onMounted(() => {
  updateComponentHeight();
  window.addEventListener("resize", updateComponentHeight); // 添加窗口大小变化的监听事件
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", updateComponentHeight);
});
console.log("attrs", useAttrs());
</script>
<style scoped>
.tree-box {
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  /* border: 1px solid red; */
}
.treenopadding {
  /* padding: 0; */
}
</style>
